<template>
  <div class="productLine">
    <div class="tempxyz rightTable">
      <CCard class="rightCard">
        <CCardHeader class="header-wraper">
          <div class="header-left-titleWraper">
            <span class="textTitle">组织机构列表</span>
          </div>
          <div class="header-right-wraper">
            <CButton
              color="info"
              @click="addUser"
              class="system-btn-style"
              data-permission="Btn_Enter_Add"
            >
              <CIcon name="cil-plus" />&nbsp;组织机构
            </CButton>
          </div>
        </CCardHeader>
        <CCardBody class="card-body">
          <div style="height: calc(100% - 45px)">
            <TableList ref="table" :getColumn="getColumns" :getAxios="getAxios">
              <template v-slot:show_details="item">
                <CButton
                  title="详情"
                  variant="outline"
                  class="textBtnStyle onButton system-btn-style"
                  @click="getInfo(item.data.row)"
                >
                  详情
                </CButton>
                <CButton
                  title="编辑"
                  variant="outline"
                  class="textBtnStyle onButton system-btn-style"
                  @click="update(item.data.row)"
                  data-permission="Btn_Enter_Up"
                >
                  编辑
                </CButton>
                <CButton
                  title="删除"
                  variant="outline"
                  class="textBtnStyle onButton system-btn-style"
                  @click="del(item.data.row)"
                  data-permission="Btn_Enter_Del"
                >
                  删除
                </CButton>
              </template>
            </TableList>
          </div>
        </CCardBody>
        <!--  <CCardBody>
            <div class="user">
              <CDataTable :items="data" :fields="fields" hover border>
                <template #status="{item}">
                  <td align="center">
                    <img :src="getBadge(item.status)" />
                  </td>
                </template>
                <template #show_details="{item}">
                  <td class="py-2" align="center">
                    &lt;!&ndash; <CButton
                      v-c-tooltip="'详情'"
                      title="详情"
                      variant="outline"
                      style="margin-right: 5px"
                      @click="getInfo(item)"
                    >
                      <CIcon class="colortempstyle" name="cil-line-spacing" />
                    </CButton>
                    <CButton
                      v-c-tooltip="'编辑'"
                      title="编辑"
                      color="rgb(2,40,88)"
                      class="buttonMargin writeBtn"
                      @click="update(item)"
                      data-permission="Btn_Enter_Up"
                    >
                      <img class="featuresstyle" src="@/assets/icons/edit.svg" alt />
                    </CButton>
                    <CButton
                      v-c-tooltip="'删除'"
                      title="删除"
                      color="rgb(2,40,88)"
                      class="buttonMargin deleteBtn"
                      @click="del(item)"
                      data-permission="Btn_Enter_Del"
                    >
                      <img class="featuresstyle" src="@/assets/icons/delete.svg" alt />
                    </CButton> &ndash;&gt;
                    <CButton
                      title="详情"
                      variant="outline"
                      class="textBtnStyle"
                      @click="getInfo(item)"
                    >
                    详情
                    </CButton>
                    <CButton
                      title="编辑"
                      variant="outline"
                      class="textBtnStyle"
                      @click="update(item)"
                      data-permission="Btn_Enter_Up"
                    >
                    编辑
                    </CButton>
                    <CButton
                      title="删除"
                      variant="outline"
                      class="textBtnStyle"
                      @click="del(item)"
                      data-permission="Btn_Enter_Del"
                    >
                    删除
                    </CButton>
                  </td>
                </template>
              </CDataTable>
            </div>
          </CCardBody>
          <CCardFooter>
            <CRow>
              <CCol class="footerPage">
                <span class="pageContent">
                  每页
                  <CSelect
                    @change="getVendorId($event)"
                    :options="[10,15,20,25]"
                    v-model="pageSize"
                    class="selectStyle"
                    style
                  />
                  条记录。第{{this.currentPage}}页(总共{{this.total}}页，{{this.allNum}}条记录)
                </span>
                <CPagination
                  :activePage.sync="currentPage"
                  :pages="total"
                  align="end"
                  v-if="total != 0"
                />
              </CCol>
            </CRow>
          </CCardFooter>-->
      </CCard>
    </div>

    <Modal
      v-model="getShow"
      draggable
      scrollable
      title="组织机构信息"
      :styles="modalStyle"
    >
      <p slot="header" class="modalHeader">组织机构信息</p>
      <CRow>
        <CCol md="12">
          <CForm>
            <CInput label="组织名称" horizontal v-model="item.name" readonly />
            <CInput label="组织编码" horizontal v-model="item.code" readonly />
            <CInput label="传真" horizontal v-model="item.fax" readonly />
            <CInput
              label="邮政编码"
              horizontal
              v-model="item.zipcode"
              readonly
            />
            <CInput label="地址" horizontal v-model="item.address" readonly />
            <CInput label="备注" horizontal v-model="item.memo" readonly />
          </CForm>
        </CCol>
      </CRow>
      <template #footer class="footerBtns">
        <CButton @click="getCancel" color="info" class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="getOk" color="info" class="system-btn-style"
          >确定</CButton
        >
      </template>
    </Modal>
    <Modal
      v-model="addShow"
      draggable
      scrollable
      title="添加组织信息"
      :styles="modalStyle"
    >
      <p slot="header" class="modalHeader">添加组织信息</p>
      <CRow>
        <CCol md="12">
          <CForm>
            <CInput
              label="组织名称"
              placeholder="请输入组织名称"
              horizontal
              v-model="newEnterprise.name"
            />
            <CInput
              label="组织编码"
              placeholder="请输入组织编码"
              horizontal
              v-model="newEnterprise.code"
            />
            <CInput
              label="传真"
              placeholder="请输入传真"
              horizontal
              v-model="newEnterprise.fax"
            />
            <CInput
              label="邮政编码"
              placeholder="请输入邮政编码"
              horizontal
              v-model="newEnterprise.zipcode"
            />
            <CInput
              label="地址"
              placeholder="请输入地址"
              horizontal
              v-model="newEnterprise.address"
            />
            <CInput
              label="备注"
              placeholder="请输入备注"
              horizontal
              v-model="newEnterprise.memo"
            />
          </CForm>
        </CCol>
      </CRow>
      <template #footer class="footerBtns">
        <CButton @click="addCancel" color="info" class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="addOk" color="info" class="system-btn-style"
          >确定</CButton
        >
      </template>
    </Modal>
    <Modal
      v-model="updateShow"
      draggable
      scrollable
      title="修改组织信息"
      :styles="modalStyle"
    >
      <p slot="header" class="modalHeader">修改组织信息</p>
      <CRow>
        <CCol md="12">
          <CForm>
            <CInput
              label="组织名称"
              placeholder="请输入组织名称"
              horizontal
              v-model="updateEnterprise.name"
            />
            <CInput
              label="组织编码"
              placeholder="请输入组织编码"
              horizontal
              v-model="updateEnterprise.code"
              readonly
            />
            <CInput
              label="传真"
              placeholder="请输入传真"
              horizontal
              v-model="updateEnterprise.fax"
            />
            <CInput
              label="邮政编码"
              placeholder="请输入邮政编码"
              horizontal
              v-model="updateEnterprise.zipcode"
            />
            <CInput
              label="地址"
              placeholder="请输入地址"
              horizontal
              v-model="updateEnterprise.address"
            />
            <CInput
              label="备注"
              placeholder="请输入备注"
              horizontal
              v-model="updateEnterprise.memo"
            />
          </CForm>
        </CCol>
      </CRow>
      <template #footer class="footerBtns">
        <CButton @click="updateCancel" color="info" class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="updateOk" color="info" class="system-btn-style"
          >确定</CButton
        >
      </template>
    </Modal>
    <Modal
      v-model="delShow"
      draggable
      scrollable
      title="删除组织"
      :styles="modalStyle"
    >
      <p slot="header" class="modalHeader">
        <img src="@/assets/icons/shanchu.svg" alt />
        <span style="margin-left: 5px">删除组织</span>
      </p>
      <div class="modalBody">
        <p>您正在删除该组织记录信息</p>
        <p>请确认是否删除?</p>
      </div>
      <template #footer class="footerBtns">
        <CButton @click="delCancel" color="info" class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="delOk" color="info" class="system-btn-style"
          >确定</CButton
        >
      </template>
    </Modal>
  </div>
</template>

<script>
const fields = [
  {
    label: "序号",
    key: "number",
    _style: "width:80px;text-align: center;background:rgba(241,244,249,1);",
    align: "center",
  },
  {
    label: "组织名称",
    key: "name",
    _style: "width:auto;text-align: center;background:rgba(241,244,249,1);",
    align: "center",
  },
  {
    label: "组织编码",
    key: "code",
    _style: "width:auto;text-align: center;background:rgba(241,244,249,1);",
    align: "center",
  },
  {
    label: "传真",
    key: "fax",
    _style: "width:90px;text-align: center;background:rgba(241,244,249,1);",
    align: "center",
  },
  {
    label: "邮政编码",
    key: "zipcode",
    _style: "width:90px;text-align: center;background:rgba(241,244,249,1);",
    align: "center",
  },
  {
    key: "show_details",
    label: "操作",
    _style: "width:240px;text-align: center;background:rgba(241,244,249,1);",
    align: "center",
  },
];
import endIcon from "@/assets/icons/endIcon.png";
import failedIcon from "@/assets/icons/failedIcon.png";
import TableList from "@/template/table/TableList";
export default {
  name: "enterprise",
  components: { TableList },
  data() {
    return {
      modalStyle: { top: "250px" },
      getShow: false,
      addShow: false,
      updateShow: false,
      delShow: false,
      loading: true,
      data: [],
      item: {},
      clickId: -1,
      total: 0,
      currentPage: 1,
      fields,
      typeList: [],
      newEnterprise: {
        address: "",
        code: "",
        fax: "",
        memo: "",
        name: "",
        zipcode: "",
      },
      updateEnterprise: {
        address: "",
        code: "",
        fax: "",
        memo: "",
        name: "",
        zipcode: "",
      },
      pageSize: 25,
      allNum: 0,

      getColumns: [
        {
          title: "组织名称",
          key: "name",
        },
        {
          title: "组织编码",
          key: "code",
        },
        {
          title: "传真",
          key: "fax",
          width: 180,
          className: "centerText",
        },
        {
          title: "邮政编码",
          key: "zipcode",
          width: 180,
          className: "centerText",
        },
        {
          title: "操作",
          key: "show_details",
          slot: "show_details",
          width: 240,
          className: "centerText",
        },
      ],

      getAxios: {
        url: this.$api.manageApi.enterprise, //请求路径
        method: "get", //请求方式
        dataList: {}, //请求参数
      },
    };
  },
  mounted() {
    // this.getAll();
  },
  methods: {
    /**
     * 获取每页对应的value值，并转为数值形
     */
    getVendorId(event) {
      let tempdata = event.target.value;
      this.pageSize = parseInt(tempdata);
      this.getAll();
    },
    getBadge(status) {
      switch (status) {
        case 0:
          return failedIcon;
        case 1:
          return endIcon;
      }
    },
    getInfo(val) {
      this.getShow = true;
      this.clickId = val.id;
      this.item = val;
    },
    getCancel() {
      this.getShow = false;
    },
    getOk() {
      this.getShow = false;
    },
    update(val) {
      this.updateShow = true;
      this.clickId = val.id;
      this.updateEnterprise = JSON.parse(JSON.stringify(val)); //deep copy
    },
    del(val) {
      this.clickId = val.id;
      this.getOrganiseByEnterId();//部门有用户的不能进行删除部门
    },
    delOk() {
      let self = this;
      let path = this.$api.manageApi.enterprise + "/" + self.clickId;
      this.http.delete(path).then((res) => {
        if (res.data.success) {
          self.delShow = false;
          this.$Message.success(res.data.message);
          this.getAll();
        } else {
          this.$Message.error(res.data.message);
        }
      });
    },

    //获取企业部门节点信息
    getOrganiseByEnterId() {
      let path = this.$api.manageApi.getTree;
      let param = {
        enterId: this.clickId,
        isTree: true,
      };
      this.http.get(path, param).then((res) => {
        if (res.data.success) {

          this.delShow = false;
          if (res.data.data.length > 0) {
            this.$Message.warning(
              "不能删除有用户的部门，请您前往部门管理模块查看！"
            );
            return;
          } else {
            this.delShow = true;
          }
        } else {
          this.$Message.error(res.data.message);
        }
      });
    },
    delCancel() {
      this.delShow = false;
    },
    updateOk() {
      let self = this;
      let path = this.$api.manageApi.enterpriseUpdate + "/" + self.clickId;
      let param = self.updateEnterprise;
      this.http.post(path, param).then((res) => {
        if (res.data.success) {
          this.updateShow = false;
          this.$Message.success(res.data.message);
          this.getAll();
        } else {
          this.$Message.error(res.data.message);
        }
      });
    },
    updateCancel() {
      this.updateShow = false;
    },
    addUser() {
      this.addShow = true;
    },
    addOk() {
      let self = this;
      let path = this.$api.manageApi.enterprise;
      let param = self.newEnterprise;
      this.http.post(path, param).then((res) => {
        if (res.data.success) {
          this.addShow = false;
          this.newEnterprise = {
            address: "",
            code: "",
            fax: "",
            memo: "",
            name: "",
            zipcode: "",
          };
          self.getAll();
          this.$Message.success("添加成功");
        } else {
          this.$Message.error(res.data.message);
        }
      });
    },

    addCancel() {
      this.addShow = false;
    },
    getAll() {
      let path = this.$api.manageApi.enterprise;
      let param = {
        pageNum: this.currentPage,
        pageSize: this.pageSize,
      };
      let getAxiosData = {
        method: "get",
        url: path,
      };
      this.$refs.table.getRefreshTable(param, getAxiosData);
    },
  },
  watch: {
    data(newVal, oldVal) {
      this.$nextTick(function () {
        this.GlobalPermissionRender.render();
      });
    },
    currentPage(newVal, oldVal) {
      this.currentPage = newVal;
      this.getAll();
    },

    pageSize(newVal, oldVal) {
      this.pageSize = newVal;
      this.getAll();
    },
  },
};
</script>

<style scoped>
.col-xl-12 {
  padding-left: 20px;
  padding-right: 20px;
}

.footerPage {
  display: flex;
  justify-content: flex-end;
  cursor: pointer;
  color: #151517 !important;
}
.pageContent {
  margin-right: 26px;
  font-size: 14px;
}
.selectStyle {
  display: inline-block;
  width: 100px;
  margin-right: 5px;
}

.userTitle {
  margin-bottom: 0 !important;
}
</style>
<style scoped>
/deep/.ivu-table td.centerText {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  text-align: -moz-center;
  text-align: -webkit-center;
}

.onButton:hover {
  color: white;
}
</style>
